<template>
	<div class="page">
		<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm"
			@keyup.enter.native="refreshList()" @submit.native.prevent>
			<!-- 搜索框-->
			<el-form-item prop="applyuser.id">
				<user-select :limit='1' size="small" placeholder="请选择申请人" :value="searchForm.applyuser.id"
					@getValue='(value) => {searchForm.applyuser.id=value}'></user-select>
			</el-form-item>
			<el-form-item prop="name">
				<el-input size="small" v-model="searchForm.name" placeholder="员工姓名" clearable></el-input>
			</el-form-item>
			<el-form-item prop="posttime">
				<el-input size="small" v-model="searchForm.posttime" placeholder="到岗日期" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="refreshList()" size="small">查询</el-button>
				<el-button @click="resetSearch()" size="small">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 导入导出-->
		<el-dialog title="导入Excel" :visible.sync="isImportCollapse">
			<el-form :inline="true" v-show="isImportCollapse" class="query-form" ref="importForm">
				<el-form-item>
					<el-button type="default" @click="downloadTpl()" size="small">下载模板</el-button>
				</el-form-item>
				<el-form-item prop="loginName">
					<el-upload class="upload-demo"
						:action="`${this.$http.BASE_URL}/dlyrl/oa/applyentry/oaApplyEntry/import`"
						:on-success="uploadSuccess" :show-file-list="true">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">只允许导入“xls”或“xlsx”格式文件！</div>
					</el-upload>
				</el-form-item>
			</el-form>
		</el-dialog>
		<div class="bg-white top">
			<el-row>
				<el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:add')" type="primary" size="small"
					icon="el-icon-plus" @click="add()">新建</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:edit')" type="warning" size="small"
					icon="el-icon-edit-outline" @click="edit()" :disabled="dataListSelections.length != 1" plain>修改
				</el-button>
				<el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:del')" type="danger" size="small"
					icon="el-icon-delete" @click="del()" :disabled="dataListSelections.length <= 0" plain>删除
				</el-button>
				<el-button-group class="pull-right">
					<el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:import')" type="default"
						size="small" icon="el-icon-upload2" title="导入"
						@click="isImportCollapse = !isImportCollapse, isSearchCollapse=false"></el-button>
					<el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:export')" type="default"
						size="small" icon="el-icon-download" title="导出" @click="exportExcel()"></el-button>
					<el-button type="default" size="small" icon="el-icon-refresh" @click="refreshList">
					</el-button>
				</el-button-group>
			</el-row>
			<el-table :data="dataList" :cell-style="cellStyle" :row-class-name="tableRowClassName"
				:header-cell-class-name="cellHeadStyle" style="width:100%; border:1px solid #d6cfe2;"
				@selection-change="selectionChangeHandle" @sort-change="sortChangeHandle" v-loading="loading"
				size="small" height="calc(100% - 80px)" @expand-change="detail" class="table">
				<el-table-column type="selection" header-align="center" align="center" width="50">
				</el-table-column>
				<!-- <el-table-column type="expand">
      <template slot-scope="scope">
      <el-tabs>
            </el-tabs>
      </template>
      </el-table-column> -->
				<el-table-column prop="applyuser.name" show-overflow-tooltip align=“center” label="申请人">
					<!-- <template slot-scope="scope">
              <el-link  type="primary" :underline="false" v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:edit')" @click="edit(scope.row.id)">{{scope.row.applyuser.name}}</el-link>
              <el-link  type="primary" :underline="false" v-else-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:view')"  @click="view(scope.row.id)">{{scope.row.applyuser.name}}</el-link>
              <span v-else>{{scope.row.applyuser.name}}</span>
            </template> -->
				</el-table-column>
				<el-table-column prop="company.name" show-overflow-tooltip align=“center” label="所属公司">
				</el-table-column>
				<!-- <el-table-column
        prop="applydate"
        show-overflow-tooltip
        align=“center”
        label="申请日期">
      </el-table-column> -->
				<el-table-column prop="depart.name" show-overflow-tooltip align=“center” label="所属部门">
				</el-table-column>
				<el-table-column prop="name" show-overflow-tooltip align=“center” label="员工姓名">
				</el-table-column>
				<el-table-column prop="sex" show-overflow-tooltip align=“center” label="员工性别">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("sex", scope.row.sex, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="phone" show-overflow-tooltip align=“center” label="员工电话">
				</el-table-column>
				<!-- <el-table-column
        prop="idcard"
        show-overflow-tooltip
        align=“center”
        label="身份证号">
      </el-table-column> -->
				<el-table-column prop="postname.name" show-overflow-tooltip align=“center” label="岗位">
				</el-table-column>
				<!-- <el-table-column
        prop="roleId"
        show-overflow-tooltip
        align=“center”
        label="角色">
      </el-table-column> -->
				<!-- <el-table-column
        prop="loginname"
        show-overflow-tooltip
        align=“center”
        label="登录名">
      </el-table-column>
    <el-table-column
        prop="password"
        show-overflow-tooltip
        align=“center”
        label="密码">
      </el-table-column> -->
				<el-table-column prop="office.name" show-overflow-tooltip align=“center” label="归属部门">
				</el-table-column>
				<el-table-column prop="bankofdeposit" show-overflow-tooltip align=“center” label="开户行">
				</el-table-column>
				<el-table-column prop="banknumber" show-overflow-tooltip align=“center” label="行号">
				</el-table-column>
				<el-table-column prop="bankaccount" show-overflow-tooltip align=“center” label="银行账号">
				</el-table-column>
				<el-table-column prop="staffstatus" show-overflow-tooltip align=“center” label="员工状态">
					<template slot-scope="scope">
						{{ $dictUtils.getDictLabel("work_status", scope.row.staffstatus, '-') }}
					</template>
				</el-table-column>
				<el-table-column prop="contractform" show-overflow-tooltip align=“center” label="合同形式">
				</el-table-column>
				<el-table-column prop="jobperformance" show-overflow-tooltip align=“center” min-width="100"
					label="岗位绩效金额">
				</el-table-column>
				<el-table-column prop="postsalary" show-overflow-tooltip align=“center” label="岗位工资">
				</el-table-column>
				<el-table-column prop="posttime" show-overflow-tooltip align=“center” label="到岗日期">
				</el-table-column>
				<!-- <el-table-column
        prop="remarks"
        show-overflow-tooltip
        align=“center”
        label="备注信息">
      </el-table-column> -->
				<!-- <el-table-column
        header-align="center"
        align="center"
        fixed="right"
        :key="Math.random()"
        width="200"
        label="操作">
        <template  slot-scope="scope">
          <el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:view')" type="text" icon="el-icon-view" size="small" @click="view(scope.row.id)">查看</el-button>
          <el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:edit')" type="text" icon="el-icon-edit" size="small" @click="edit(scope.row.id)">修改</el-button>
          <el-button v-if="hasPermission('dlyrl:oa:applyentry:oaApplyEntry:del')" type="text"  icon="el-icon-delete" size="small" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column> -->
			</el-table>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
				:page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
				layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<!-- <OaApplyEntryForm  ref="oaApplyEntryForm" @refreshDataList="refreshList"></OaApplyEntryForm> -->
	</div>
</template>

<script>
	import OaApplyEntryForm from './OaApplyEntryForm'
	import UserSelect from '@/components/userSelect'
	import tableStyles from '../../../../../utils/mixins'
	export default {
		mixins: [tableStyles],
		data() {
			return {
				searchForm: {
					applyuser: {
						id: ''
					},
					name: '',
					posttime: '',
				},
				dataList: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				orderBy: '',
				dataListSelections: [],
				isImportCollapse: false,
				loading: false
			}
		},
		components: {
			UserSelect,
			OaApplyEntryForm
		},
		activated() {
			this.refreshList()
		},
		methods: {
			// 获取数据列表
			refreshList() {
				this.loading = true;
				this.$http({
					url: '/dlyrl/oa/applyentry/oaApplyEntry/list',
					method: 'get',
					params: {
						'pageNo': this.pageNo,
						'pageSize': this.pageSize,
						'orderBy': this.orderBy,
						'company': this.$store.state.user.companyId,
						...this.searchForm
					}
				}).then(({
					data
				}) => {
					if (data && data.success) {
						this.dataList = data.page.list
						this.total = data.page.count
						this.loading = false
					}
				})
			},
			// 每页数
			sizeChangeHandle(val) {
				this.pageSize = val
				this.pageNo = 1
				this.refreshList()
			},
			// 当前页
			currentChangeHandle(val) {
				this.pageNo = val
				this.refreshList()
			},
			// 多选
			selectionChangeHandle(val) {
				this.dataListSelections = val
			},

			// 排序
			sortChangeHandle(obj) {
				if (obj.order === 'ascending') {
					this.orderBy = obj.prop + ' asc'
				} else if (obj.order === 'descending') {
					this.orderBy = obj.prop + ' desc'
				} else {
					this.orderBy = ''
				}
				this.refreshList()
			},
			// 新增
			add() {
				this.$refs.oaApplyEntryForm.init('add', '')
			},
			// 修改
			edit(id) {
				id = id || this.dataListSelections.map(item => {
					return item.id
				})[0]
				this.$refs.oaApplyEntryForm.init('edit', id)
			},
			// 查看
			view(id) {
				this.$refs.oaApplyEntryForm.init('view', id)
			},
			// 删除
			del(id) {
				let ids = id || this.dataListSelections.map(item => {
					return item.id
				}).join(',')
				this.$confirm(`确定删除所选项吗?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					this.$http({
						url: '/dlyrl/oa/applyentry/oaApplyEntry/delete',
						method: 'delete',
						params: {
							'ids': ids
						}
					}).then(({
						data
					}) => {
						if (data && data.success) {
							this.$message.success(data.msg)
							this.refreshList()
						}
						this.loading = false
					})
				})
			},
			// 查看详情
			detail(row) {
				this.$http.get(`/dlyrl/oa/applyentry/oaApplyEntry/queryById?id=${row.id}`).then(({
					data
				}) => {
					this.dataList.forEach((item, index) => {
						if (item.id === row.id) {}
					})
				})
			},
			// 导入成功
			uploadSuccess(res, file) {
				if (res.success) {
					this.$message.success({
						dangerouslyUseHTMLString: true,
						message: res.msg
					})
				} else {
					this.$message.error(res.msg)
				}
			},
			// 下载模板
			downloadTpl() {
				this.$utils.download('/dlyrl/oa/applyentry/oaApplyEntry/import/template')
			},
			exportExcel() {
				let params = {
					...this.searchForm
				}
				this.$utils.download('/dlyrl/oa/applyentry/oaApplyEntry/export', params)
			},
			resetSearch() {
				this.$refs.searchForm.resetFields()
				this.refreshList()
			}
		}
	}
</script>
